<template>
  <div class="move-file-box" id="move-fiel-page">
    <mobileNavbar :name="$t('message.mobile.moveTo')" @back="back" :showBottomBorder="true"></mobileNavbar>
    <div class="search-box">
      <svg class="search-icon" aria-hidden="true">
        <use xlink:href="#keowledge-mobile-sousuo"></use>
      </svg>
      <el-input v-model="searchVal" :placeholder="$t('message.placeholder.pleaseLibraryName')"></el-input>
      <div class="clear-box">
        <svg class="icon" aria-hidden="true" v-if="searchVal" @click.stop="clearVal">
          <use xlink:href="#keowledge-mobile-guanbi-2"></use>
        </svg>
      </div>
    </div>
    <div class="moveFile-box">
      <mobileScroll :ops="scrollOps" :openPullDown="true" :openUpload="false" @refresh-start="handleRS" v-if="fileList.length!=0">
        <div v-for="(item,index) in fileList" :key="index" class="file-item" @click="openFileDic(item)">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#keowledge-mobile-wenjianjia"></use>
          </svg>
          <div class="right">
            <div class="file-name">{{item}}</div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#keowledge-mobile-a-zu4905"></use>
            </svg>
          </div>
        </div>
      </mobileScroll>
      <jvs-empty imgSrc="@/assets/images/common/empty.png" v-if="fileList.length==0"></jvs-empty>
    </div>
    <div class="moveFile-actions">
      <!-- #D7D8DB -->
      <div class="back-level" :class="[backList.length==0&&'back-disable']">{{$t('message.mobile.backlevel')}}</div>
      <div class="sure-move" :class="[!moveItem&&'sure-disable']">{{$t('message.buttons.move')}}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import mobileNavbar from './mobileNavbar.vue';
import mobileScroll from './mobileScroll.vue';
import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({

})

const searchVal = ref('')
const scrollOps = ref({
  click:true,
  observeDOM: true,
  probeType: 3,
  pullDownRefresh: {
    threshold: parseFloat(document.documentElement.style.fontSize) * 6.25,
    stop:  parseFloat(document.documentElement.style.fontSize) * 6.25
  },
  pullUpLoad: true,
  bounce:{
    top:false,
    bottom:false
  }
})
const fileList = ref([])
const backList = ref([])
const moveItem = ref(null)

function handleRS(){

}
function openFileDic(item){
  backList.value.push(item)
  moveItem.value = JSON.parse(JSON.stringify(item))
}
function clearVal(){
  searchVal.value = ''
}
function back(val){
  router.push(val)
}
</script>
<style lang="scss" scoped>
.move-file-box{
  .search-box{
    height: 2.5rem;
    background: #f5f6f7;
    border-radius: .1875rem;
    margin: 1rem .9375rem;
    display: flex;
    align-items: center;
    padding: 0px .75rem;
    ::v-deep(.el-input__wrapper){
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }
    .search-icon{
      width: 1rem;
      height: 1rem;
    }
    .clear-box{
      width: 1rem;
      height: 1rem;
      .icon{
        width: 1rem;
        height: 1rem;
      }
    }
  }
  .moveFile-box{
    height: calc(100vh - 11.875rem);
    .file-item{
      height: 4rem;
      display: flex;
      align-items: center;
      padding-left: .9375rem;
      .icon{
        width: 1.5rem;
        min-width: 1.5rem;
        height: 1.5rem;
      }
      .right{
        height: 4rem;
        margin-left: .75rem;
        width: 100%;
        display: flex;
        align-items: center;
        // justify-content: space-between;
        border-bottom: 1px solid #EEEFF0;
        padding-right: .9375rem;
        .file-name{
          color: #363B4C;
          font-size: .875rem;
          @include SourceHanSansCN-Medium;
          width: calc(100vw - 5.5rem);
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .icon{
          width: 1.5rem;
          min-width: 1.5rem;
          height: 1.5rem;
        }
      }
    }
  }
  .moveFile-actions{
    border-top: 1px solid #EEEFF0;
    padding: .625rem .9375rem;
    column-gap: 1rem;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    .back-level{
      @include SourceHanSansCN-Medium;
      height: 3rem;
      text-align: center;
      line-height: 3rem;
      font-size: .875rem;
      background: #F5F6F7;
      border-radius: .375rem;
      color: #363B4C;
    }
    .back-disable{
      color:#D7D8DB;
    }
    .sure-move{
      @include SourceHanSansCN-Medium;
      font-size: .875rem;
      height: 3rem;
      text-align: center;
      line-height: 3rem;
      background: #1E6FFF;
      border-radius: .375rem;
      color: #FFFFFF;
    }
    .sure-disable{
      background-color: #8EB7FF;
      color: #FFFFFF;
    }
  }
}
</style>